<template>
	<view class="container">
		<view class="title">Libiray</view>
		<view class="library">
			<view class="library-pane">
				<view class="pane-title">
					<text>标化考试</text>
				</view>
				<view class="pane-list">
					<view  class="pane-list-item" @click="goExamination()">{{paperNames}}</view>
				</view>
			</view>
			<view class="library-pane">
				<view class="pane-title">
					<text>竞赛</text>
				</view>
				<view class="pane-list">
					<view class="pane-list-item" @click="goCompetition">{{paperNames}}</view>
				</view>
			</view>
		</view>
	</view>
	<Tabbar />
</template>

<script setup>
	// 导入Tabbar组件
	import Tabbar from '@/components/Tabbar/Tabbar.vue';
	// 导入导航函数
	import { navigateTo } from '@/utils/index.js';
	import { getExamList } from '@/api/exam';
	import { ref } from 'vue';
	const paperNames=ref('')

	const examList = ref([]);

	/**
	 * 跳转到考试页面
	 */
	const goExamination = () => {
		navigateTo(`/pages/examination/examination`);
	};

	/**
	 * 跳转到竞赛页面
	 */
	const goCompetition = () => {
		navigateTo('/pages/competition/competition');
	};

	const getExamData = () => {
		getExamList().then((res) => {
			examList.value = res.rows || [];
			let newArray=examList.value.map((obj)=>{return obj.paperName})
			paperNames.value=newArray.join("/")
		});
	};

	getExamData();
</script>

<style lang="scss" scoped>
	.container {
		padding: 84rpx 58rpx;
	}

	.title {
		color: #ffffff;
		font-size: 84rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 100rpx;
		font-family: PINGFANG-HEAVY;
		padding-left: 20rpx;
	}

	.library {
		margin-top: 40rpx;
		width: 100%;
		height: calc(100% - 260rpx);
		display: flex;
		flex-direction: column;
		gap: 50rpx;
		justify-content: space-between;

		&-pane {
			width: 100%;
			height: 100%;
			border-radius: 34rpx;
			background: linear-gradient(236deg, #dde5f4 0%, #b6caff 100%);
			padding: 54rpx 32rpx;
		}
	}

	.pane-title {
		width: 100%;
		height: 84rpx;

		text {
			background: linear-gradient(130deg, #b5cff8 26.65%, rgba(80, 129, 255, 0.8) 78.78%);
			width: 256rpx;
			height: 84rpx;
			background-color: #ffffff;
			display: block;
			border-radius: 34rpx;
			text-align: center;
			line-height: 84rpx;
			color: #ffffff;
			font-family: 'PINGFANG-MEDIUM';
			font-size: 42rpx;
			font-weight: bolder;
			filter: drop-shadow(0rpx 20rpx 20rpx rgba(0, 50, 179, 0.5));
		}
	}

	.pane-list {
		padding: 20rpx 0;

		&-item {
			width: 100%;
			color: #000000;
			text-align: left;
			font-family: 'PINGFANG-MEDIUM';
			font-size: 42rpx;
			font-weight: bolder;
			line-height: 62rpx;
			padding-left: 20rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}
	}
</style>
